<style>
.poetry:target {
  background-color: #ddf4df;
  border-color: #76be35;
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div class="article">
          <h1>杜甫诗歌精选</h1>
          <div class="box outline gray space-sm">
            <ul class="no-margin">
              <li><a href="#p1">春望</a></li>
              <li><a href="#p2">春夜喜雨</a></li>
              <li><a href="#p3">绝句</a></li>
              <li><a href="#p4">望岳</a></li>
            </ul>
          </div>
          <div id="p1" class="box poetry">
            <h3>春望</h3>
            <p>国破山河在，城春草木深。</p>
            <p>感时花溅泪，恨别鸟惊心。</p>
            <p>烽火连三月，家书抵万金。</p>
            <p>白头搔更短，浑欲不胜簪。</p>
          </div>
          <div id="p2" class="box poetry">
            <h3>春夜喜雨</h3>
            <p>好雨知时节，当春乃发生。</p>
            <p>随风潜入夜，润物细无声。</p>
            <p>野径云俱黑，江船火独明。</p>
            <p>晓看红湿处，花重锦官城。</p>
          </div>
          <div id="p3" class="box poetry">
            <h3>绝句</h3>
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。</p>
            <p>窗含西岭千秋雪，门泊东吴万里船。</p>
          </div>
          <div id="p4" class="box poetry">
            <h3>望岳</h3>
            <p>岱宗夫如何？齐鲁青未了。</p>
            <p>造化钟神秀，阴阳割昏晓。</p>
            <p>荡胸生曾云，决眦入归鸟。</p>
            <p>会当凌绝顶，一览众山小。</p>
          </div>
        </div>
        <div><pre class="prettyprint"><code>&lt;div class=&quot;article&quot;&gt;
  &lt;h1&gt;&#x675c;&#x752b;&#x8bd7;&#x6b4c;&#x7cbe;&#x9009;&lt;/h1&gt;
  &lt;div class=&quot;box outline gray space-sm&quot;&gt;
    &lt;ul class=&quot;no-margin&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#p1&quot;&gt;&#x6625;&#x671b;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#p2&quot;&gt;&#x6625;&#x591c;&#x559c;&#x96e8;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#p3&quot;&gt;&#x7edd;&#x53e5;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#p4&quot;&gt;&#x671b;&#x5cb3;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id=&quot;p1&quot; class=&quot;box poetry&quot;&gt;
    &lt;h3&gt;&#x6625;&#x671b;&lt;/h3&gt;
    &lt;p&gt;&#x56fd;&#x7834;&#x5c71;&#x6cb3;&#x5728;&#xff0c;&#x57ce;&#x6625;&#x8349;&#x6728;&#x6df1;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x611f;&#x65f6;&#x82b1;&#x6e85;&#x6cea;&#xff0c;&#x6068;&#x522b;&#x9e1f;&#x60ca;&#x5fc3;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x70fd;&#x706b;&#x8fde;&#x4e09;&#x6708;&#xff0c;&#x5bb6;&#x4e66;&#x62b5;&#x4e07;&#x91d1;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x767d;&#x5934;&#x6414;&#x66f4;&#x77ed;&#xff0c;&#x6d51;&#x6b32;&#x4e0d;&#x80dc;&#x7c2a;&#x3002;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id=&quot;p2&quot; class=&quot;box poetry&quot;&gt;
    &lt;h3&gt;&#x6625;&#x591c;&#x559c;&#x96e8;&lt;/h3&gt;
    &lt;p&gt;&#x597d;&#x96e8;&#x77e5;&#x65f6;&#x8282;&#xff0c;&#x5f53;&#x6625;&#x4e43;&#x53d1;&#x751f;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x968f;&#x98ce;&#x6f5c;&#x5165;&#x591c;&#xff0c;&#x6da6;&#x7269;&#x7ec6;&#x65e0;&#x58f0;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x91ce;&#x5f84;&#x4e91;&#x4ff1;&#x9ed1;&#xff0c;&#x6c5f;&#x8239;&#x706b;&#x72ec;&#x660e;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x6653;&#x770b;&#x7ea2;&#x6e7f;&#x5904;&#xff0c;&#x82b1;&#x91cd;&#x9526;&#x5b98;&#x57ce;&#x3002;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id=&quot;p3&quot; class=&quot;box poetry&quot;&gt;
    &lt;h3&gt;&#x7edd;&#x53e5;&lt;/h3&gt;
    &lt;p&gt;&#x4e24;&#x4e2a;&#x9ec4;&#x9e42;&#x9e23;&#x7fe0;&#x67f3;&#xff0c;&#x4e00;&#x884c;&#x767d;&#x9e6d;&#x4e0a;&#x9752;&#x5929;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x7a97;&#x542b;&#x897f;&#x5cad;&#x5343;&#x79cb;&#x96ea;&#xff0c;&#x95e8;&#x6cca;&#x4e1c;&#x5434;&#x4e07;&#x91cc;&#x8239;&#x3002;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id=&quot;p4&quot; class=&quot;box poetry&quot;&gt;
    &lt;h3&gt;&#x671b;&#x5cb3;&lt;/h3&gt;
    &lt;p&gt;&#x5cb1;&#x5b97;&#x592b;&#x5982;&#x4f55;&#xff1f;&#x9f50;&#x9c81;&#x9752;&#x672a;&#x4e86;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x9020;&#x5316;&#x949f;&#x795e;&#x79c0;&#xff0c;&#x9634;&#x9633;&#x5272;&#x660f;&#x6653;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x8361;&#x80f8;&#x751f;&#x66fe;&#x4e91;&#xff0c;&#x51b3;&#x7726;&#x5165;&#x5f52;&#x9e1f;&#x3002;&lt;/p&gt;
    &lt;p&gt;&#x4f1a;&#x5f53;&#x51cc;&#x7edd;&#x9876;&#xff0c;&#x4e00;&#x89c8;&#x4f17;&#x5c71;&#x5c0f;&#x3002;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.poetry:target {
  background-color: #ddf4df;
  border-color: #76be35;
}</code></pre></div>
      </div>
     </div>
  </div>
</div>
